<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        搜索功能：
            1. 前端搜索 - computed
                一开始获取到全部的接口数据，然后与搜索关键字做filter。实现前端搜索
            2. 后端搜索 - watch
                输入框的输入关键字的变化去重新调用后端的搜索接口，将接口返回值作为搜索结果

     -->

    <div id="app">
        <div style="background-color: green; padding: 20px;" @click="handleClick">
            <button>点我</button>
        </div>

        <input type="text" placeholder="请输入关键字" v-bind:value="keyword" v-on:input="handleInput" />
        <hr />
        <p>源数据</p>
        <ul>
            <li v-for="item in fruits">
                {{ item.id }} - {{ item.name }}
            </li>
        </ul>
        <p>搜索结果</p>
        <ul>
            <li v-for="item in searchResult">
                {{ item.id }} - {{ item.name }}
            </li>
        </ul>

    </div>

    <script type="module">
        import { createApp } from './lib/vue3.esm.browser.js'


        createApp({

            data() {
                return {
                    keyword: '', // 用于存储当前输入框的内容

                    fruits: [
                        { id: 1, name: 'Apple' },
                        { id: 2, name: 'Banana' },
                        { id: 3, name: 'Orange' },
                    ]
                }
            },

            computed: {
                // 搜索结果
                //      依赖项： fruits 、keyword
                //      计算过程：fruits.filter(keyword)
                searchResult() {
                    return this.fruits.filter((item) => {
                        // 精准匹配
                        // return item.name === this.keyword

                        // 模糊匹配 indexOf  includes
                        // return item.name.indexOf(this.keyword) > -1
                        // return item.name.includes(this.keyword)

                        // 模糊匹配 + 大小写不敏感
                        return item.name.toLowerCase().includes(this.keyword.toLowerCase())

                    })
                }
            },

            methods: {
                handleInput(event) {
                    // event 是事件对象，PS，模板中使用时不要加括号



                    // 1. 获取真实DOM上输入的value值
                    const value = event.target.value

                    // 2. 将 value 赋值给 keyword
                    this.keyword = value
                },

                handleClick(event) {
                    // ?? target 与 currentTarget 有什么区别

                    // target - 是触发事件的元素
                    // currentTarget - 是绑定事件的元素
                    console.log('target', event.target)
                    console.log('currentTarget', event.currentTarget)
                }
            }

        }).mount('#app')
    </script>
</body>

</html>